<!-- 从这里复制的 https://www.stapharma.com/loginpage/ -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录页面</title>
    <style>
        body {
            background: #353f42;
        }

        * {
            padding: 0;
            margin: 0;
        }

        .main {
            margin: 0 auto;
            padding-left: 25px;
            padding-right: 25px;
            padding-top: 15px;
            width: 350px;
            height: 350px;
            background: #FFFFFF;
            /*以下css用于让登录表单垂直居中在界面,可删除*/
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -175px;
            margin-left: -175px;
        }

        .title {
            width: 100%;
            height: 40px;
            line-height: 40px;
        }

        .title span {
            font-size: 18px;
            color: #353f42;
        }

        .title-msg {
            width: 100%;
            height: 64px;
            line-height: 64px;
        }

        .title:hover {
            cursor: default;
        }

        .title-msg:hover {
            cursor: default;
        }

        .title-msg span {
            font-size: 12px;
            color: #707472;
        }

        .input-content {
            width: 100%;
            height: 120px;
        }

        .input-content input {
            width: 330px;
            height: 40px;
            border: 1px solid #dad9d6;
            background: #ffffff;
            padding-left: 10px;
            padding-right: 10px;
        }

        .enter-btn {
            width: 350px;
            height: 40px;
            color: #fff;
            background: #0bc5de;
            line-height: 40px;
            text-align: center;
            border: 0;
        }

        .foor {
            width: 100%;
            height: auto;
            color: #9b9c98;
            font-size: 12px;
            margin-top: 20px;
        }

        .enter-btn:hover {
            cursor: pointer;
            background: #1db5c9;
        }

        .foor div:hover {
            cursor: pointer;
            color: #484847;
            font-weight: 600;
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="title">
        <span>Password login</span>
    </div>

    <div class="title-msg">
        <span>Please enter your login account and password</span>
    </div>

    <form class="login-form" method="post" action="/authentication/form.html" novalidate>
        <!--输入框-->
        <div class="input-content">
            <!--autoFocus-->
            <div>
                <input type="text" id="username" autocomplete="off" placeholder="User name" name="username" required/>
            </div>

            <div style="margin-top: 16px">
                <input type="password" id="password" autocomplete="off" placeholder="Login password" name="password"
                       required maxlength="32"/>
            </div>
        </div>

        <!--登入按钮-->
        <div style="text-align: center">
            <button type="submit" class="enter-btn">Sign in</button>
        </div>
    </form>

</div>
</body>
</html>